<template>
  <div class="sku-container">
    <div class="tree-content" id="tree-content">
      <a-tree
        v-if="treeData && treeData.length"
        :show-line="true"
        :show-icon="false"
        :default-expanded-keys="[treeData[0].id]"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        :replaceFields="replaceFields"
        @select="onSelect"
      >
      </a-tree>
      <a-empty v-else description="暂无数据" style="margin-top: 30px;" />
    </div>
    <div class="content">
      <div class="line" id="sidebar"></div>
      <product-library-sku-child-list ref="libraryRef" @handleCategoryIdChange="handleCategoryIdChange" />
    </div>
  </div>
</template>

<script>
  import ProductLibrarySkuChildList from './ProductLibrarySkuChildList'
  import { productMixins } from '@/views/productLibrary/mixins/productMixins'
  export default {
    name: 'ProductLibrarySkuList',
    mixins:[productMixins],
    components: { ProductLibrarySkuChildList },
    data(){
      return {
        selectedKeys: [],
      }
    },
    watch: {
      treeData: {
        handler(val){
          if(!(val && val.length)) return;
          this.$refs.libraryRef.changeLoadData();
        }
      }
    },
    created() {
      this.loadData_('', 'queryMyCategory');
      // 左侧树状左右拉动
      this.initSlide();
    },
    methods: {
      onSelect(selectedKeys, info){
        this.selectedKeys = selectedKeys;
        this.$refs.libraryRef.changeLoadData(selectedKeys[0]);
      },
      handleCategoryIdChange(selectedKeys){
        this.selectedKeys = [selectedKeys];
      },
      initSlide(){
        this.$nextTick(() => {
          const sidebar = document.getElementById('sidebar');
          const treeContent = document.getElementById('tree-content');
          let startWidth, startX;
          const minWidth = 200; // 最小宽度
          const maxWidth = 500; // 最大宽度，可以根据需要调整
          
          sidebar.addEventListener('mousedown', function(e) {
            startWidth = parseFloat(getComputedStyle(treeContent).width);
            startX = e.clientX;
            document.addEventListener('mousemove', mouseMoveHandler);
          });
          
          document.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', mouseMoveHandler);
          });
          
          function mouseMoveHandler(e) {
            const diffX = e.clientX - startX;
            let newWidth = startWidth + diffX;
            newWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
            treeContent.style.width = newWidth + 'px';
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.sku-container{
  background-color: #fff;
  display: flex;
  width: 100%;
  user-select: none;
  .tree-content{
    width: 15%;
    /deep/.ant-tree{
      padding: 24px;
      li ul{
        width: 100%;
      }
      li .ant-tree-node-content-wrapper{
        width: calc(100% - 24px);
      }
      .ant-tree-title{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
    }
  }
  .content{
    width: 85%;
    position: relative;
    .line{
      width: 1px;
      height: 100%;
      background-color: #f5f5f5;
      cursor: col-resize; /* 显示可拖动指针 */
      position: absolute;
      z-index: 9;
    }
  }
}
</style>